<script setup>
import router from "@/router/index.js";
// import '../assets/css/order.css'

function gotoPayment(){
  router.push('/payment')
}

const orders = [
  { img: 'img/sp01.png', name: '纯肉鲜肉（水饺）', count: 2, price: 15 },
  { img: 'img/sp02.png', name: '玉米鲜肉（水饺）', count: 1, price: 16 }
];
</script>

<template>
  <div class="wrapper">

    <!-- header部分 -->
    <header class="bg-[rgb(0,151,255)] h-[60px] text-white text-center text-[23px] pt-2 fixed top-0 left-0 right-0 z-50" >
      <p>确认订单</p>
    </header>
    <div class="h-[60px]"></div>
    <!-- 订单信息部分 -->
    <div class="order-info bg-[rgb(0,151,245)] pl-2 text-white">
      <h5 class="text-[14px] pt-1">订单配送至：</h5>
      <div class="order-info-address flex text-[23px] font-[600] ">
        <p>沈阳市浑南区智慧四街1-121号</p>
        <i class="fa fa-angle-right ml-auto pr-2"></i>
      </div>
      <p>习近平先生 13656785432</p>
    </div>

    <h3 class=" pt-2  pl-2 border-b pb-2 text-gray-600 text-[20px] font-[600]">
      万家饺子（软件园E18店）</h3>

    <!-- 订单明细部分 -->
    <ul class="order-detailed">
      <li v-for="item in orders" :key=item.name class=" pl-5 flex" >
        <div class="order-detailed-left flex ">
          <img :src="item.img" alt="" class="h-16 w-16">
          <p class="pt-6 pl-5 text-gray-500" >{{item.name}} x {{item.count}}</p>
        </div>
        <p class="ml-auto pr-3">&#165;{{item.price}}</p>
      </li>

    </ul>
    <div class="order-delivery-fee  pl-5 pt-6 w-full flex ">
      <p>配送费</p>
      <p class="ml-auto pr-3">&#165;3</p>
    </div>

    <!-- 合计部分 -->
    <div class=" fixed h-[60px] bottom-0 left-0 w-full flex text-[25px]">
      <div class="total-left w-[60%] text-center text-white bg-gray-600 font-[600] pt-3">
        &#165;49
      </div>
      <div class="total-right text-center w-[40%]  text-white bg-green-500  pt-3 font-[600]" @click="gotoPayment">
        去支付
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>